<template>
  <div id="app">
    <p>{{ num1 }}</p>
    <p>{{ num2 }}</p>
    <!-- 不易于管理 -->
    <p>{{ num1 * 2 + num2 * 3 - num1 / 2 + num1 - num2 }}</p>
    <p>{{ relNum }}</p>
    <p>{{ relNum }}</p>
    <p>{{ relNum }}</p>
    <p>{{ opaFun() }}</p>
    <p>{{ opaFun() }}</p>
    <p>{{ opaFun() }}</p>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      num1: 10,
      num2: 20,
      // The computed property "relNum" is already defined in data.
      // relNum: 100,
    };
  },
  methods: {
    opaFun() {
      console.log("方法");
      return (
        this.num1 * 2 + this.num2 * 3 - this.num1 / 2 + this.num1 - this.num2
      );
    },
  },
  // 局部过滤器
  filters: {},
  computed: {
    // 1.统一计算结果--结果更加简洁
    // 2.需要有return 结果值
    // 3.计算属性和data中的数据的命名不能够重复
    // 4.计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高
    relNum() {
      console.log("计算属性");
      return (
        this.num1 * 2 + this.num2 * 3 - this.num1 / 2 + this.num1 - this.num2
      );
    },
  },
};
</script>

<style>
</style>
